<script setup lang="ts">
interface Props {
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  size: 64
})
</script>

<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 64 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="score-icon"
  >
    <!-- 图表背景框 -->
    <rect
      x="8"
      y="12"
      width="48"
      height="40"
      rx="4"
      fill="url(#score-gradient-bg)"
    />
    <!-- X轴 -->
    <line
      x1="14"
      y1="46"
      x2="50"
      y2="46"
      stroke="white"
      stroke-width="2"
      opacity="0.8"
    />
    <!-- Y轴 -->
    <line
      x1="14"
      y1="20"
      x2="14"
      y2="46"
      stroke="white"
      stroke-width="2"
      opacity="0.8"
    />
    <!-- 柱状图1 -->
    <rect
      x="20"
      y="36"
      width="6"
      height="10"
      rx="1"
      fill="url(#bar-gradient-1)"
    />
    <!-- 柱状图2 -->
    <rect
      x="30"
      y="28"
      width="6"
      height="18"
      rx="1"
      fill="url(#bar-gradient-2)"
    />
    <!-- 柱状图3 -->
    <rect
      x="40"
      y="24"
      width="6"
      height="22"
      rx="1"
      fill="url(#bar-gradient-3)"
    />
    <!-- 趋势线 -->
    <path
      d="M23 39L33 31L43 27"
      stroke="#FFD700"
      stroke-width="3"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <!-- 数据点1 -->
    <circle cx="23" cy="39" r="3" fill="#FFD700" />
    <!-- 数据点2 -->
    <circle cx="33" cy="31" r="3" fill="#FFD700" />
    <!-- 数据点3 -->
    <circle cx="43" cy="27" r="3" fill="#FFD700" />

    <!-- 渐变定义 -->
    <defs>
      <linearGradient id="score-gradient-bg" x1="8" y1="12" x2="56" y2="52" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#00f2fe" />
        <stop offset="100%" stop-color="#4facfe" />
      </linearGradient>
      <linearGradient id="bar-gradient-1" x1="23" y1="36" x2="23" y2="46" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#7ee8fa" />
        <stop offset="100%" stop-color="#4facfe" />
      </linearGradient>
      <linearGradient id="bar-gradient-2" x1="33" y1="28" x2="33" y2="46" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#00f2fe" />
        <stop offset="100%" stop-color="#4facfe" />
      </linearGradient>
      <linearGradient id="bar-gradient-3" x1="43" y1="24" x2="43" y2="46" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#FFD700" />
        <stop offset="100%" stop-color="#4facfe" />
      </linearGradient>
    </defs>
  </svg>
</template>

<style scoped>
.score-icon {
  filter: drop-shadow(0 4px 8px rgba(79, 172, 254, 0.3));
  transition: transform 0.3s ease;
}

.score-icon:hover {
  transform: scale(1.05);
}
</style>
